{% extends 'adminuser/base_admin.html' %}

{% block admin_title %}数据分析总览{% endblock %}
{% block admin_breadcrumb_title %}数据分析总览{% endblock %}
{% block admin_card_title %}数据分析总览{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block admin_content %}
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">系统概览</h5>
                <div class="btn-group">
                    <a href="?range=week" class="btn btn-outline-primary {% if time_range == 'week' %}active{% endif %}">7天</a>
                    <a href="?range=month" class="btn btn-outline-primary {% if time_range == 'month' %}active{% endif %}">30天</a>
                    <a href="?range=year" class="btn btn-outline-primary {% if time_range == 'year' %}active{% endif %}">一年</a>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="card bg-primary text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总用户数</h6>
                                <h3 class="mb-0">{{ total_users|default:"1,284" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ user_growth|default:"7.5" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-success text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总故事数</h6>
                                <h3 class="mb-0">{{ total_stories|default:"3,572" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ story_growth|default:"12.3" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-info text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总浏览量</h6>
                                <h3 class="mb-0">{{ total_views|default:"28,953" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ view_growth|default:"15.7" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-warning text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总点赞数</h6>
                                <h3 class="mb-0">{{ total_likes|default:"8,742" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ like_growth|default:"9.2" }}%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 平均数据卡片 -->
                <div class="row mt-4 g-3">
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">平均浏览量</h5>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-eye fs-1 text-primary me-3"></i>
                                    <div>
                                        <h2 class="text-primary mb-0">{{ avg_views_per_story|default:"8.1" }}</h2>
                                        <p class="text-secondary mb-0">每篇故事平均浏览量</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">平均互动量</h5>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-hand-thumbs-up fs-1 text-success me-3"></i>
                                    <div>
                                        <h2 class="text-success mb-0">{{ avg_likes_per_story|default:"2.4" }}</h2>
                                        <p class="text-secondary mb-0">每篇故事平均点赞数</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- 用户增长图表 -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-light">
                <h5 class="mb-0">用户增长趋势</h5>
            </div>
            <div class="card-body">
                <canvas id="userGrowthChart" height="250"></canvas>
            </div>
        </div>
    </div>
    
    <!-- 内容增长图表 -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-light">
                <h5 class="mb-0">内容增长趋势</h5>
            </div>
            <div class="card-body">
                <canvas id="contentGrowthChart" height="250"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- 分类故事分布图表 -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-light">
                <h5 class="mb-0">分类故事分布</h5>
            </div>
            <div class="card-body">
                <canvas id="categoryDistributionChart" height="250"></canvas>
            </div>
        </div>
    </div>
    
    <!-- 用户角色分布图表 -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-light">
                <h5 class="mb-0">用户角色分布</h5>
            </div>
            <div class="card-body">
                <canvas id="userRoleChart" height="250"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 mb-4">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0">综合指标趋势</h5>
            </div>
            <div class="card-body">
                <canvas id="metricsChart" height="120"></canvas>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 固定示例数据
    const dateLabels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月'];
    const userGrowthData = [180, 240, 320, 390, 450, 520, 580];
    const contentGrowthData = [220, 310, 410, 490, 590, 680, 780];
    const viewsData = [1200, 1800, 2500, 3200, 4100, 5000, 5800];
    const likesData = [350, 480, 650, 820, 980, 1150, 1320];
    
    // 分类数据
    const categoryLabels = ['科幻', '奇幻', '悬疑', '爱情', '历史', '其他'];
    const categoryData = [25, 20, 18, 15, 12, 10];
    
    // 用户角色数据
    const roleLabels = ['普通用户', 'VIP用户', '创作者', '管理员'];
    const roleData = [65, 20, 12, 3];
    
    // 用户增长趋势图表
    const userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d');
    const userGrowthChart = new Chart(userGrowthCtx, {
        type: 'line',
        data: {
            labels: dateLabels,
            datasets: [{
                label: '用户数',
                data: userGrowthData,
                backgroundColor: 'rgba(13, 110, 253, 0.2)',
                borderColor: 'rgba(13, 110, 253, 1)',
                borderWidth: 2,
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top'
                },
                title: {
                    display: true,
                    text: '用户增长趋势'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 内容增长趋势图表
    const contentGrowthCtx = document.getElementById('contentGrowthChart').getContext('2d');
    const contentGrowthChart = new Chart(contentGrowthCtx, {
        type: 'line',
        data: {
            labels: dateLabels,
            datasets: [{
                label: '故事数',
                data: contentGrowthData,
                backgroundColor: 'rgba(25, 135, 84, 0.2)',
                borderColor: 'rgba(25, 135, 84, 1)',
                borderWidth: 2,
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top'
                },
                title: {
                    display: true,
                    text: '内容增长趋势'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 分类故事分布图表
    const categoryDistributionCtx = document.getElementById('categoryDistributionChart').getContext('2d');
    const categoryDistributionChart = new Chart(categoryDistributionCtx, {
        type: 'pie',
        data: {
            labels: categoryLabels,
            datasets: [{
                data: categoryData,
                backgroundColor: [
                    'rgba(13, 110, 253, 0.7)',
                    'rgba(25, 135, 84, 0.7)',
                    'rgba(255, 193, 7, 0.7)',
                    'rgba(220, 53, 69, 0.7)',
                    'rgba(111, 66, 193, 0.7)',
                    'rgba(108, 117, 125, 0.7)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right'
                },
                title: {
                    display: true,
                    text: '故事分类分布'
                }
            }
        }
    });
    
    // 用户角色分布图表
    const userRoleCtx = document.getElementById('userRoleChart').getContext('2d');
    const userRoleChart = new Chart(userRoleCtx, {
        type: 'doughnut',
        data: {
            labels: roleLabels,
            datasets: [{
                data: roleData,
                backgroundColor: [
                    'rgba(13, 110, 253, 0.7)',
                    'rgba(25, 135, 84, 0.7)',
                    'rgba(255, 193, 7, 0.7)',
                    'rgba(220, 53, 69, 0.7)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right'
                },
                title: {
                    display: true,
                    text: '用户角色分布'
                }
            }
        }
    });
    
    // 综合指标图表
    const metricsCtx = document.getElementById('metricsChart').getContext('2d');
    const metricsChart = new Chart(metricsCtx, {
        type: 'bar',
        data: {
            labels: dateLabels,
            datasets: [
                {
                    label: '浏览量',
                    data: viewsData,
                    backgroundColor: 'rgba(13, 110, 253, 0.7)',
                    borderColor: 'rgba(13, 110, 253, 1)',
                    borderWidth: 1,
                    order: 1
                },
                {
                    label: '点赞数',
                    data: likesData,
                    backgroundColor: 'rgba(25, 135, 84, 0.7)',
                    borderColor: 'rgba(25, 135, 84, 1)',
                    borderWidth: 1,
                    order: 2
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top'
                },
                title: {
                    display: true,
                    text: '综合指标统计'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});
</script>
{% endblock %} 